<template>
  <div class="box">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
      status-icon>
      <el-form-item label="分类名称" prop="region">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="上级分类" prop="name">
        <el-select v-model="cate" placeholder="全部" size="large">
          <el-option v-for="(item, index) in options" :key="index" :value="item" @click="handleChange()" />
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位" prop="region">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="region">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="是否显示" label-width="140px" prop="delivery">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏" label-width="140px" prop="region">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="region" label="分类图标">
        <el-upload v-model:file-list="fileList" class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview"
          :on-remove="handleRemove" list-type="picture">
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="筛选属性" prop="name">
        <el-select v-model="cate" placeholder="请选择" size="large">
          <el-option v-for="(item, index) in options" :key="index" :value="item" @click="handleChange()" />
        </el-select>
        <el-button style="margin-left:30px">删除</el-button>
      </el-form-item>
      <el-form-item prop="region">
        <el-button type="primary">新增</el-button>
      </el-form-item>
    </el-form>
    <el-form-item label="关键词：" prop="region" label-width="100px">
      <el-input></el-input>
    </el-form-item>
    <el-form-item label="分类描述：" prop="region" label-width="100px">
      <el-input type="textarea"></el-input>
    </el-form-item>
    <el-form-item prop="region" label-width="100px">
      <el-button type="primary" size="large">提交</el-button>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { UploadProps, UploadUserFile } from 'element-plus';
import { reactive, ref } from 'vue';

const cate = ref('')
const options = reactive([
  { label: '', value: '123' },
  { label: '', value: '123' },
])
const ruleForm = reactive({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  resource: ""
})
const rules = reactive<any>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
function handleChange() { }

</script>

<style scoped>
.box {
  width: 900px;
  border: 1px solid rgb(228, 225, 225);
  margin: 50px auto;
  border-radius: 5px;
  padding: 50px;
  box-sizing: border-box;
}

:deep(.el-upload-list__item) {
  width: 600px;
}
</style>